<template>
    <div class="wrapper-content">
        <div class="wrapper-first">
            <img src="https://oss.xiaoniaoai.com/dingbu@3x.png " alt="" class="firstimg">
            <div class="singin" @click = "signin" v-if= "!fromranks">
                 <img src="https://oss.xiaoniaoai.com/icons-01@2x.png" alt="">
                签到
            </div>
             <!-- <div class="checkmy" @click = "checkmy">
                <p class="iconfont icon-zhuye"></p>
               返回查看
            </div> -->
            <div class="ranks" @click= "ranks" v-if= "!fromranks">
                 <img src="https://oss.xiaoniaoai.com/icons-02@2x.png" alt="">
                 <span>排行榜</span> 
            </div>
            <div class="record" @click = "gonext" v-if= "!fromranks">
                 <img src="https://oss.xiaoniaoai.com/icons-03@2x.png" alt="">
                 <span>档案集</span> 
            </div>
            <div class="perinfo">
                <img :src="infos.avatar" alt="" class="perimg">
                <div class="pername">
                    <p>{{infos.username}}</p>
                    <p class="pergender">
                        <span style="margin-right:.1rem">{{infos.sex == 0 ? '女' : '男'}}</span>
                        <span style="margin-left:.1rem">{{infos.age}}岁</span>
                        
                    </p>
                </div>
            </div>
            <div class="numbers">
                <img src="https://oss.xiaoniaoai.com/kb-02@2x.png" alt="">
                <div>
                    <p>
                        <span>{{infos.study_total}}</span>
                        <span>档案数</span>
                        
                    </p>
                    <p>
                        <span>{{infos.score}}</span>
                        <span>人气值</span>
                        
                    </p>
                    <p>
                        <span>{{infos.hits}}</span>
                        <span>浏览量</span>
                        
                    </p>
                </div>
            </div>
        </div>
        <div class="wrapper-second">
             <div class="learnumber">
                <img src="https://oss.xiaoniaoai.com/bk-01@3x.png" alt="">
                <div class="wrapper-circle">
                    <img src="https://oss.xiaoniaoai.com/yuan@2x.png" alt="">
                    <span class="wrapper-circle-word">评分：<span>100</span></span> 
                </div>
                <ul>
                    <li><span>已学习课程</span><span>{{infos.study_total}}</span></li>
                    <li><span>获得星星数</span><span>{{toalstars}}</span></li>
                    <li><span>被赞次数</span><span>{{infos.zan_total}}</span></li>
                    
                </ul>
            </div>
        </div>
        <div class="wrapper-third">
           <p class="line"></p>
           精彩集锦
        </div>
        <div class="wrapper-fourth">
            <ul class="datalist">
            	<li v-for='(item ,index ) of msg' :key='item.index'  class="datalistli" v-if='index<3'>
                   <div class="content-wrapper">
                        <span class="titles" @click= "godetail(index)">{{item.course_name}}</span>
                        <p class="wrapper-grade">
                             <span class="grade" @click= "godetail(index)">档案评分:</span>
                          <yd-rate slot="left" v-model= "item.score" :readonly="true" color="#fdc600" active-color="color:#fdc600" size=".3rem"></yd-rate>
                        </p>
                       
                        <!-- <span v-for="(items,index) in 5" :key="index" class="stars">
                            <img src="https://oss.xiaoniaoai.com/grade-star.png" alt=""  style="width：.2rem;height:.2rem">
                        </span> -->
                        <img src="https://oss.xiaoniaoai.com/icon-05@3x.png" alt="" class="mores" @click= "godetail(index)">
                        <div class="content-imgs" @click= "godetail(index)">
                             <img :src= "items" alt="" v-for="(items,index) of item.photos.split(',')" v-if=" index <= item.photos.split(',').length-2 && index <1 " :key="index">
                        </div>
                        <p class="content-intro">{{item.goal}}</p>
                        <span class="times">{{item.course_date}}</span>
                        <span class="times">浏览{{item.hits}}次</span>
                        <p class="seting" >
                            <img src="https://oss.xiaoniaoai.com/icon-06@3x.png" alt="" ><span @click= "nice" class="nice($event)" flag =true>{{infos.zan_total}}</span>
                        </p>
                    </div>
            	</li>    
            </ul>
        </div>
            <div class="wrapper-fifth" @click= "gonextpages">         
                <img src="https://oss.xiaoniaoai.com/buttons@3x.png" alt="">
                  {{texts}}
            </div>
        <div class="wrapper-sixth" v-if = "showsignin">
            <div class="wrapper-touch"> 
                <img src="https://oss.xiaoniaoai.com/imgsd%20%282%29.png" alt="">
                <div @click = "confirm" class="confirm">确认</div>
                <span>1</span>
                <p>
                    <span></span>
                    <span>签到成功</span>
                    <span>恭喜您获得5人气</span>
                    <span></span>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import { Toast } from 'mint-ui';
export default {
    name:'index',
    data () {
        return {
             msg: '',
             showsignin:false,
             infos:'',
             record:'',
             id: localStorage.getItem('user_id'),
             uid: localStorage.getItem('user_uid'),
             rate:'',
             fromranks:'',
             texts:'',
             records:'',
             score:'',
             vote:'',
             photos:'',
             toalstars:''

        }
    },
    methods:{
       signin () {
          document.body.style.overflow='hidden';
            axios.post('https://shixiaozhang.cn/api/app/courserecord/sign_up',{
                uid:this.uid,
                stu_id:this.id
                }).then((val) => {
                    console.log(val.data.code)
                    if(val.data.code == '0'){
                        this.showsignin = false
                    }else{
                       this.showsignin = true;
                    }
                      Toast({
                    message: val.data.msg,
                    position: 'middle',
                    duration: 1000
                    })
                  console.log(val)
                }).catch((err) => {
                console.log(err);
                })
       },
       nice(e){
           if(e.target.getAttribute('flag') == 'true'){
               e.target.innerHTML ++
              e.target.setAttribute('flag',false)
           }else if (e.target.getAttribute('flag') == 'false'){
                e.target.innerHTML --
            e.target.setAttribute('flag',true)
           }
           },
        gonext () {
         this.$router.push('/study_list')
       },
       ranks () {
          this.$router.push({
          path: '/ranks',
          query: {
            leng: this.records
          }
        })
       },
       godetail (e) {
          this.$router.push({
          path: '/study_detail',
          query: {
            e:e
          }
        })
           
       },
        confirm () {
          this.showsignin = false;
          this.reload();
        },     
       gonextpages () {
           if(this.fromranks){
                this.$router.push('/index')
                this.fromranks = false
                  axios.post('https://shixiaozhang.cn/api/app/courserecord/find_student',{
                id:this.id
                }).then((val) => {
                  this.texts = '更多精彩请点击这里',
                this.infos = val.data.data;
                }).catch((err) => {
                console.log(err);
                }),
                axios.post('https://shixiaozhang.cn/api/app/courserecord/find_courserecord_list',{
                id:this.id
                }).then((val) => {
                console.log(val);
                if(val.data.data.data.length == '0'){
                    Toast({
                    message: '您目前还没有档案',
                    position: 'middle',
                    duration: 1000
                    })
                }
                this.msg = val.data.data.data;
               
                 this.records=val.data.data.data.length 
                }).catch((err) => {
                console.log(err);
                })
           }else if ( this.records == '0'){
                Toast({
                    message: '请联系老师发布档案！',
                    position: 'middle',
                    duration: 1000
                    })
             
        }else{
             this.$router.push('/study_list')
        }
       }
    },
    created (){
       var sf = this.$route.query.fromranks
     
       if(sf)
       {  
             this.fromranks = true
             this.texts = '返回我的主页'
             axios.post('https://shixiaozhang.cn/api/app/courserecord/find_student',{
                 id:sf
                }).then((val) => {
                console.log(val);
                this.infos = val.data.data;
                }).catch((err) => {
                console.log(err);
                }),
                axios.post('https://shixiaozhang.cn/api/app/courserecord/find_courserecord_list',{
                id:sf
                }).then((val) => {
                console.log(val);
                if(val.data.data.data.length == '0'){
                    Toast({
                    message: 'ta目前还没有档案',
                    position: 'middle',
                    duration: 1000
                    })
                }
                this.msg = val.data.data.data;
                }).catch((err) => {
                console.log(err);
                })
       }else{
         this.texts = '更多精彩请点击这里',
          axios.post('https://shixiaozhang.cn/api/app/courserecord/find_student',{
        id:this.id
        }).then((val) => {
           console.log(val);
          this.infos = val.data.data;
        }).catch((err) => {
          console.log(err);
        }),
         axios.post('https://shixiaozhang.cn/api/app/courserecord/find_courserecord_list',{
        id:this.id
        }).then((val) => {
          console.log(val);
           this.records=val.data.data.data.length 
          if(val.data.data.data.length == '0'){
             Toast({
              message: '您目前还没有档案',
              position: 'middle',
              duration: 1000
            })
        }
         var toalstars  =0
        for(var i =0 ; i< val.data.data.data.length; i++){
            toalstars += val.data.data.data[i].score
        }
        this.toalstars =toalstars
          this.msg = val.data.data.data;
           axios.post('https://shixiaozhang.cn/api/app/courserecord/find_teacher',{
               uid:val.data.data.data[0].uid
                }).then((val) => {
                 console.log(val.data.data.company)
                  localStorage.setItem('company',val.data.data.company);
                }).catch((err) => {
                  console.log(err);
                })
          
        }).catch((err) => {
          console.log(err);
        })
       }
   },
   mounted(){
       this.WXConfig.wxShowMenu(); 
   },
   filters: {
			formatDate:function (date) {
			var d = new Date(date);
			var year = d.getFullYear();
			var month = d.getMonth() + 1;
			var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
			return  year+ '-' + month + '-' + day + ' ' ;
			}
		}
}
</script>
<style scoped>
.wrapper-first{
    width: 100%;
    height: 5.01rem;
    position: relative;
    
}
.firstimg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.singin{
    width:.68rem;
    position: absolute;
    left: .64rem;
    top: .6rem;
    color: #C6FFF5;
    font-family:'PingFang-SC-Medium';
    font-size: .29rem;

}
.singin > img {
    width: 100%;
    height: 100%;
}
.ranks{
    width:.93rem;
    position: absolute;
    right: .44rem;
    top: .6rem;
    color: #C6FFF5;
    font-family:'PingFang-SC-Medium';
    font-size: .29rem;
}
.ranks > img{
   width: 75%;
   margin-left:12.5%;
   height: 100%
}
.record{
    width:.93rem;
    position: absolute;
    right: .44rem;
    top: 2rem;
    color: #C6FFF5;
    font-family:'PingFang-SC-Medium';
    font-size: .29rem;
}
.record > img{
   width: 75%;
   margin-left:12.5%;
   height: 100%
}
.perinfo{
    width:40%;
    height:3.34rem;
    position: absolute;
    left: 30%;
    top: .6rem;
    font-family:'PingFang-SC-Medium';
    font-size: .29rem;
    display: flex;
    justify-content:space-around;
    align-items: center;
    flex-direction: column;
}
.perinfo >img{
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
}
.perinfo > .pername > p {
  font-size:.28rem;
  color: #fff;
  width: 100%;
  text-align: center;
}
.perinfo > .pername>.pergender{
    display: flex;
    justify-content:space-around;
    align-items: center;
    margin-top: .1rem;
}
.perinfo > .pername>.pergender > span {
    width: .82rem;
    height: .34rem;
    background:rgba(49,49,49,1);
    opacity:0.35;
    color: #fff;
    border-radius:10px;
    display: flex;
    justify-content: center;
    align-items: center
}
.numbers{
    width: 85%;
    height: 1.2rem;
    position: absolute;
    left: 7.5%;
    top: 4.2rem;
    color: #C6FFF5;
    font-family:'PingFang-SC-Medium';
    font-size: .29rem;
}
.numbers>img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.numbers>div{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:space-around;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
}
.numbers>div>p{
     display: flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: column;
}
.numbers>div>p>span:nth-child(1){
    font-size: .36rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(254,131,6,1);
}
.numbers>div>p>span:nth-child(2){
    font-size:.22rem;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(135,135,135,1);
}
.wrapper-second{
    margin-top: .7rem;
}
.wrapper-grade{
    height: .4rem;
    display: flex;
    align-items: center;
}
.learnumber{
    width:90%;
    margin-left:5%;
    height: 3.68rem;
    position: relative;
}
.learnumber>img:nth-child(1){
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.learnumber>.wrapper-circle{
    width: 2.31rem;
    height: 2.31rem;
    position: absolute;
    left: 10%;
    top:21%;
    text-align: center;
    line-height: 2.31rem;
    font-size:.3rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(255,152,68,1);
}
.wrapper-circle>img{
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
}
.wrapper-circle-word{
    position: absolute;
    top: 0;
    left: 21%;
}
.learnumber >ul{
    position: absolute;
    right: 15%;
    top:25%; 
    width: 1.5rem;
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: column;
}
.learnumber >ul>li{
    height: .6rem;
    width: 2rem;
    display: flex;
    justify-content:space-between;
    align-items: center;
    font-size:.24rem;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(254,253,253,1);
}
.wrapper-third{
    width: 85%;
    margin: .3rem 0;
    margin-left: 7.5%;
    font-size:.32rem;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:rgba(51,51,51,1);
    height: .32rem;
    line-height: .32rem;
}
.line{
    width: .06rem;
    height: .32rem;
    float: left;
    margin-right: .3rem;
    background:rgba(253,198,0,1);
    border-radius:3px;
}
.datalist{
  width: 100%;
  position: relative;
}
.datalist>li{
  width: 90%;
  margin-left: 5%;
  margin-top:.2rem;
  box-shadow:#cecece 0px 0px 10px;

}
.content-wrapper{
  height:100%;
  padding-left: .3rem;
  padding-right: .3rem;
  padding-top:.3rem;
  overflow: hidden;
  position: relative;
}
 .content-wrapper > span {
  display: -webkit-box;
  font-size: .26rem;
  overflow: hidden;
}
.grade{
    float: left;
    margin-right:.1rem;
    font-size:.26rem
}
.stars{
    float: left;
    width: .3rem;
    height: .3rem;
    margin-top:.1rem;
  
}
.stars > img {
    width: 100%;
    height: 100%
}
 .content-wrapper>.titles{
    font-size:.3rem;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:rgba(81,81,81,1);
}
.mores{
    width: .4rem;
    position: absolute;
    right: 5%;
    top: 6%;
}
.content-imgs{
    display:flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: .2rem;
}
.content-imgs>img{
    width: 100%;
    max-height: 12rem;
}
.content-intro{
    width: 100%;
    height:.8rem;
    line-height:.4rem;
    font-size:.27rem;
    font-family:'PingFang-SC-Regular';
    font-weight:400;
    color:rgba(190,190,190,1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow:ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: .3rem;
}
.times{
    width:40%;
    float: left;
    height: .6rem;
    font-size: .22rem;
    font-family:'PingFang-SC-Regular';
    font-weight:400;
    color:rgba(136,136,136,1);
     margin-top: .4rem;
}
.seting{
    width: 1.2rem;
    height: .4rem;
    float: left;
     margin-top: .4rem;
    font-size:.22rem;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:rgba(4,222,183,1);
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.seting>img{
    width: .4rem;
    height: .4rem;
    float: left;
}
.wrapper-fifth{
    width: 90%;
    margin-left: 5%;
    height: 1.12rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
    position: relative;
    font-size:.28rem;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height: 1.12rem;
    text-align: center;
}
.wrapper-fifth>img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.wrapper-sixth{
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(100, 89, 89, 0.397);
    z-index: 999;
}
.wrapper-sixth > .wrapper-touch{
    width: 60%;
    height: 5rem;
    position: absolute;
    top: 10%;
    left: 20%;
    z-index: 1000;
}
.wrapper-sixth > .wrapper-touch > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.wrapper-sixth > .wrapper-touch> .confirm{
    width: 50%;
    height: .72rem;
    border-radius: 20px;
    position: absolute;
    bottom: 5%;
    left: 25%;
    line-height: .72rem;
    text-align: center;
    background: #fdc600;
    z-index: 1000;
    color:#fff;
    font-size: .32rem
}
.wrapper-sixth> .wrapper-touch>span{
    font-size:.69rem;
    font-family:PingFang-SC-Heavy;
    font-weight:800;
    color:rgba(4,222,183,1);
    position: absolute;
    left: 45%;
    top:17.3%;
    z-index: 1000;
}
.wrapper-sixth> .wrapper-touch>p{
    display:flex;
    height: 30%;
    width: 50%;
    font-size: .2rem;
    position: absolute;
    left: 25%;
    top:40%;
    justify-content:space-around;
    align-items: center;
    flex-direction: column;
}
.wrapper-sixth> .wrapper-touch>p>span:nth-child(2){
    font-size:.26rem;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:rgba(255,255,255,1);
}
.wrapper-sixth> .wrapper-touch>p>span:nth-child(3){
    font-size:.24rem;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:rgba(255,255,255,1);
   
}
</style>
